<template>
    <div>
        <div >
                <div class="header">
      <div class="logo">
        <span class="spanimg" @click="Jump_path"></span>
      </div>
      <div class="text" v-show="falg">登录</div>
            <div class="text" v-show="!falg">注册</div>
    </div>
<!-- 登录 -->
        <div id="wrapper" v-show="falg">
            <div class="lr-content">
                <div class="login-yqn"></div>
                <div class="input-box">
			<input type="text" class="lr-input login-username" placeholder="请输入账号/手机号" v-model="loginphone">
                  <span></span>
		</div>
        <div class="input-box">
			<input type="password" class="lr-input login-password" placeholder="密码"  v-model="loginpassword">
            <span class="span1"></span>
			<input type="hidden" class="lr-input login-password intype" value="personal">
			<input type="hidden" class="lr-input login-password typeid">
		</div>
        <a href="javascript:;" data-href="javascript:;" class="green-btn login-btn" onclick="return false" @click="loginsubmit">登 录</a>
        <a href="javascript:;" data-href="/wap/regsiter/index" class="quick-register" @click="isfalg(false)">手机号快速注册</a>
            </div>
        </div>
        <!-- 注册 -->
            <div id="wrapper" v-show="!falg">
            <div class="lr-content">
                <div class="login-yqn"></div>
                <div class="input-box">
			<input type="text" class="lr-input login-username" placeholder="请输入手机号" v-model="registerphone">
            <span></span>
		</div>
      <div class="input-box input-password-box">
			<input type="password" class="lr-input input-password" placeholder="请输入密码" v-model="registerpassword1">
            <span class="span1"></span>
		</div>
        <div class="input-box">
			<input type="password" class="lr-input check-password" placeholder="请确认密码" v-model="registerpassword2">
            <span class="span2"></span>
		</div>
       <a href="javascript:;" class="green-btn register-btn" @click="registersubmit">注 册</a>
        <a href="javascript:;" data-href="/wap/regsiter/index" class="quick-register" @click="isfalg(true)">已有账号，点击登录</a>
            </div>
        </div>
        </div>
   
    </div>
</template>
<script>
export default {
    data() {
        return {
            falg:true,
            registerphone:'',//注册号码
            registerpassword1:'',//注册密码
            registerpassword2:'',//需确认密码
            loginphone:'',//登录号码
            loginpassword:''//登录密码
        }
    },
    created() {
           if(window.localStorage.getItem('list')==null){
                window.localStorage.setItem('list','[]')
            }
    },
    methods: {
        isfalg(is){
            this.falg=is
        },
         //返回上一级
    Jump_path() {
      this.$router.go(-1);
    },
         registersubmit(){
            // 验证手机号
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                // 2.验证密码
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
                
                if(!reg.test(this.registerphone) || !pass.test(this.registerpassword1) ){//不正确处理
                    this.$toast("请输入正确手机号码与密码");
                    console.log(1);
                    return;
                }
                if(this.registerpassword1!=this.registerpassword2){
                       this.$toast("两次密码输入不一致");
                       console.log(2);
                    return;
                }
                     let list=window.localStorage.getItem('list')
            list= JSON.parse(list)
            list.push({name:this.registerphone,password:this.registerpassword1})
            list=JSON.stringify(list)
            window.localStorage.setItem('list',list)
                   this.$toast("注册成功");
                this.falg=true
                this.registerphone=this.registerpassword1=this.registerpassword2=''
        },
        loginsubmit(){
             // 验证手机号
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                // 2.验证密码
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
                
                if(!reg.test(this.loginphone) || !pass.test(this.loginpassword) ){//不正确处理
                    this.$toast("请输入正确手机号码与密码");
                    return;
                }
                let list=window.localStorage.getItem('list')
                list =JSON.parse(list)
                list.forEach(item => {
                if(this.loginphone==item.name&&this.loginpassword==item.password){
             
                     this.$toast("登录成功");
                    this.$router.push({name:'home'})
                    window.localStorage.setItem("token",`${this.loginphone}`)
                window.localStorage.setItem("userId",`${this.loginphone}`)
                this.$emit('getloginid',this.loginphone)
                    return
                }
                });
                if(window.localStorage.getItem('token')==null){
                    this.$toast("请输入正确手机号码与密码");
                    return;
                }
        }
    },
}
</script>
<style scoped>
/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 40px;
  height: 26.5px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
 background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -13px;
}
.text {
  line-height: 23px;
  font-weight: bold;
  font-size: 18px;
}
#wrapper {
    padding-top: 50px;
}
.lr-content {
    box-sizing: border-box;
    width: 240px;
    padding: 30px 0px;
    margin: 0px 67.6px;
}
.lr-content .login-yqn {
    width: 100%;
    height: 120px;
    background: url(../../public/assets/images-index/yaoqiniang1.png) center top no-repeat;
    background-size: 142.5px auto;
}
.lr-content .input-box {
    position: relative;
      box-sizing: border-box;
    border: 1px solid #ccc;
    width: 100%;
    height: 40px;
    line-height: 14px;
    border-radius: 5px;
    padding: 12px 15px 0 35px;
    margin: 0 0 9px 0;
}
.lr-content .lr-input {
    width: 100%;
    border: none;
    background-color: transparent;
    font-size: 14px;
    height: 17px;
    line-height: 17px;
}

textarea, input {
    outline: none;
    resize: none;
}
.input-box span{
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 8px;
    left: 4px;
    background: url(../../public/assets/images-index/login1.png);
    background-size: 100% 100%;
}
.input-box .span1{
    background: url(../../public/assets/images-index/login2.png);
     background-size: 100% 100%;
}
.input-box .span2{
    background: url(../../public/assets/images-index/login3.png);
     background-size: 100% 100%;
}
element.style {
    display: block !important;
}
.lr-content .green-btn {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    background-color: #4fd962;
    text-align: center;
    margin: 45px 0 0 0;
}

a {
    color: #333;
    text-decoration: none;
}
.lr-content .quick-register {
    display: block;
    text-align: center;
    color: #333;
    font-size: 14px;
    height: 14px;
    margin: 17.5px 0 0 0;
}
</style>